<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上传Markdown文件</title>
    <style>
        body {
            font-family: 'Roboto', sans-serif;
            background: linear-gradient(135deg, #6dd5ed, #2193b0);
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0;
        }

        .upload-container {
            background-color: #fff;
            padding: 40px;
            border-radius: 12px;
            box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
            text-align: center;
            max-width: 400px;
            width: 100%;
        }

        h1 {
            margin-bottom: 30px;
            font-size: 24px;
            color: #333;
        }

        input[type="file"] {
            display: none;
        }

        label {
            display: inline-block;
            padding: 12px 25px;
            background-color: #007BFF;
            color: white;
            font-size: 16px;
            font-weight: 500;
            border-radius: 8px;
            cursor: pointer;
            margin-bottom: 20px;
        }

        label:hover {
            background-color: #0056b3;
        }

        button {
            width: 100%;
            padding: 12px;
            background-color: #28a745;
            color: white;
            font-size: 16px;
            font-weight: 500;
            border: none;
            border-radius: 8px;
            cursor: pointer;
        }

        button:hover {
            background-color: #218838;
        }

        .upload-info {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }

        .file-list {
            margin-top: 10px;
            text-align: left;
            font-size: 14px;
            color: #333;
        }

        @media (max-width: 600px) {
            .upload-container {
                padding: 30px;
                margin: 20px;
            }

            h1 {
                font-size: 20px;
            }

            label {
                padding: 10px 20px;
                font-size: 14px;
            }

            button {
                padding: 10px;
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="upload-container">
        <h1>上传您的Markdown文件</h1>
        <p class="upload-info">选择一个 .md 文件和所有相关的图片文件进行上传和转换</p>
        <form action="/upload" method="post" enctype="multipart/form-data">
            <label for="file-upload">选择Markdown文件</label>
            <input type="file" name="file" id="file-upload" accept=".md" required>

            <label for="image-upload">选择图片文件 (支持多选)</label>
            <input type="file" name="images" id="image-upload" accept="image/*" multiple required>

            <div class="file-list" id="file-list"></div>

            <button type="submit">上传并转换</button>
        </form>
    </div>

    <script>
        const fileUpload = document.getElementById('file-upload');
        const imageUpload = document.getElementById('image-upload');
        const fileList = document.getElementById('file-list');
        const fileLabel = document.querySelector('label[for="file-upload"]');
        const imageLabel = document.querySelector('label[for="image-upload"]');

        // 显示选择的Markdown文件名
        fileUpload.addEventListener('change', function() {
            const fileName = this.files[0] ? this.files[0].name : '选择Markdown文件';
            fileLabel.textContent = fileName;
        });

        // 显示选择的所有图片文件名
        imageUpload.addEventListener('change', function() {
            fileList.innerHTML = '';
            if (this.files.length > 0) {
                for (let i = 0; i < this.files.length; i++) {
                    const fileItem = document.createElement('div');
                    fileItem.textContent = this.files[i].name;
                    fileList.appendChild(fileItem);
                }
            } else {
                fileList.innerHTML = '未选择图片文件';
            }
        });
    </script>
</body>
</html>
